<!DOCTYPE html>
<style>
#outbox {
    background-color: #00ff00;
    width: 100px;
    height: 100px;
}
#outbox:active {
    background-color: #ff0000;
}
</style>
<script src='../../resources/js-test.js'></script>
<div id='outbox'>
    <button disabled>Click Me!</button>
</div>

<script>
function shouldHaveBackground(element, bg) {
    background = getComputedStyle(element, null).getPropertyValue('background-color');
    shouldBeEqualToString('background', bg);
}
description('Style :active should not be applied for disabled Form Control elements');
if (window.testRunner) {
    var box = document.getElementById('outbox');

    eventSender.dragMode = false;

    var button = document.querySelector('button');
    var buttonRect = button.getBoundingClientRect();
    // Click the button.
    eventSender.mouseMoveTo(buttonRect.left + 5, buttonRect.top + 5);
    eventSender.mouseDown();
    shouldHaveBackground(box, 'rgb(0, 255, 0)');
    eventSender.mouseUp();
}
</script>
